<template>
  <div class="I-V-I">
    <table class="I-V-I__table">
      <tr class="I-V-I__table-trone">
        <td class="I-V-I__table-trone-td"
            colspan="6">
          <div class="I-V-I__table-trone-td-title">
            I-5在校生代表性成果
          </div>
        </td>
      </tr>
      <tr class="I-V-I__table-trtwo">
        <td class="I-V-I__table-trtwo-td"
            colspan="6">
          <div class="I-V-I__table-trtwo-td-title">
            （一）在校生总体学习成果
            <span class="I-V-I__table-trtwo-td-title-tips">
              （限500字）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-V-I__table-trthree">
        <td class="I-V-I__table-trthree-td"
            colspan="6">
          <el-input v-model="aea.learnResult"
                    type="textarea"
                    class="I-V-I__table-trthree-td-textarea"
                    maxlength="500"
                    placeholder="请输入在校生总体学习成果"
                    showWordLimit
                    :autosize="{minRows:10}"/>
        </td>
      </tr>
      <tr class="I-V-I__table-trfour">
        <td class="I-V-I__table-trfour-td"
            colspan="6">
          <div class="I-V-I__table-trfour-td-title">
            （二）在校生代表性成果
            <span class="I-V-I__table-trfour-td-title-tips">
              （限20人，每人填写1-3项代表性成果）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-V-I__table-th">
        <td class="I-V-I__table-th-tdone">
          序号
        </td>
        <td class="I-V-I__table-th-tdtwo">
          姓名<br>（入学时间，学位<br>类型，学习方式）
        </td>
        <td class="I-V-I__table-th-tdthree">
          成果类别
        </td>
        <td class="I-V-I__table-th-tdfour">
          获得时间
        </td>
        <td class="I-V-I__table-th-tdfive">
          成果简介
        </td>
        <td class="I-V-I__table-th-tdsix">
          学生参与情况
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="I-V-I__table-th-add-button"
                   circle
                   @click.prevent="addResultItem"/>
      </tr>
      <template v-for="(item, index) in aea.resultInfos">
        <tr :key="index + '1'"
            class="I-V-I__table-tr">
          <td class="I-V-I__table-tr-tdone"
              rowspan="3">
            {{ index + 1 }}
          </td>
          <td class="I-V-I__table-tr-tdtwo"
              rowspan="3">
            <el-input v-model="item.name"
                      class="I-V-I__table-tr-tdtwo-input"
                      type="textarea"
                      autosize
                      placeholder="张三"/>
          </td>
          <td class="I-V-I__table-tr-tdthree">
            <el-select v-model="item.achiveves[0].type"
                       class="I-V-I__table-tr-tdthree-select"
                       placeholder="请选择">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"/>
            </el-select>
          </td>
          <td class="I-V-I__table-tr-tdfour">
            <el-input v-model="item.achiveves[0].getTime"
                      class="I-V-I__table-tr-tdfour-input"
                      placeholder="201901"
                      aotosize
                      type="textarea"/>
          </td>
          <td class="I-V-I__table-tr-tdfive">
            <el-input v-model="item.achiveves[0].introduction"
                      class="I-V-I__table-tr-tdfive-input"
                      placeholder="全国高校百名研究生党员标兵"
                      autosize
                      type="textarea"/>
          </td>
          <td class="I-V-I__table-tr-tdsix">
            <el-input v-model="item.achiveves[0].stuPartInfo"
                      class="I-V-I__table-tr-tdsix-input"
                      placeholder="唯一获奖人"
                      autosize
                      type="textarea"/>
          </td>
        </tr>
        <tr :key="index + '2'"
            class="I-V-I__table-tr">
          <td class="I-V-I__table-tr-tdthree">
            <el-select v-model="item.achiveves[1].type"
                       class="I-V-I__table-tr-tdthree-select"
                       placeholder="请选择">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"/>
            </el-select>
          </td>
          <td class="I-V-I__table-tr-tdfour">
            <el-input v-model="item.achiveves[1].getTime"
                      class="I-V-I__table-tr-tdfour-input"
                      placeholder="201912"
                      autosize
                      type="textarea"/>
          </td>
          <td class="I-V-I__table-tr-tdfive">
            <el-input v-model="item.achiveves[1].introduction"
                      class="I-V-I__table-tr-tdfive-input"
                      placeholder="XX大赛二等奖"
                      autosize
                      type="textarea"/>
          </td>
          <td class="I-V-I__table-tr-tdsix">
            <el-input v-model="item.achiveves[1].stuPartInfo"
                      class="I-V-I__table-tr-tdsix-input"
                      placeholder="团队负责人"
                      autosize
                      type="textarea"/>
          </td>
        </tr>
        <tr :key="index + '3'"
            class="I-V-I__table-tr">
          <td class="I-V-I__table-tr-tdthree">
            <el-select v-model="item.achiveves[2].type"
                       class="I-V-I__table-tr-tdthree-select"
                       placeholder="请选择">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"/>
            </el-select>
          </td>
          <td class="I-V-I__table-tr-tdfour">
            <el-input v-model="item.achiveves[2].getTime"
                      class="I-V-I__table-tr-tdfour-input"
                      placeholder="201909"
                      autosize
                      type="textarea"/>
          </td>
          <td class="I-V-I__table-tr-tdfive">
            <el-input v-model="item.achiveves[2].introduction"
                      class="I-V-I__table-tr-tdfive-input"
                      placeholder="XX期刊发表论文有关信息"
                      autosize
                      type="textarea"/>
          </td>
          <td class="I-V-I__table-tr-tdsix">
            <el-input v-model="item.achiveves[2].stuPartInfo"
                      placeholder="第二作者（导师第一作者）"
                      autosize
                      class="I-V-I__table-tr-tdsix-input"
                      type="textarea"/>
          </td>
          <el-button type="danger"
                     size="small"
                     icon="el-icon-delete"
                     class="I-V-I__table-tr-delete-button"
                     circle
                     @click.prevent="deleteResultItem(index)"/>
        </tr>
      </template>
    </table>
    <!-- 说明 -->
    <div class="I-V-I__explain">
      <span class="I-V-I__explain-strong">
        说明：①
      </span>
      本表填写在校生“德智体美劳”全方位总体学习成果，并列举表现突出的20名学生及其代表性成果。
      <span class="I-V-I__explain-strong">
        ②
      </span>
      表（二）限填除导师外学生为第一完成人（如第一作者、通讯作者、第一发明人、第一获奖人、唯一获奖人、团队负责人等）的成果，成果获得时间应在评估期内。
      <span class="I-V-I__explain-strong">
        ③
      </span>
      “学习方式”限填“全日制、非全日制、同等学力”。
      <span class="I-V-I__explain-strong">
        ④
      </span>
      “成果类别”限填“党建思政获奖、学术成果与获奖、优秀学位论文、学科竞赛获奖、体育比赛获奖、实践与创业成果、美育与劳动教育成果、其他”。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    aea: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    try {
      this.aea = await getPageData('aea')
      if (this.aea.resultInfos) {
        for (let i = 0, len = this.aea.resultInfos.length; i < len; i++) {
          for (let j = this.aea.resultInfos[i].achiveves.length; j < 3; j++) {
            this.aea.resultInfos[i].achiveves.push({ type: '', getTime: '', introduction: '', stuPartInfo: '' })
          }
        }
      }
    } catch (err) {
      // console.log(err)
    }
    loading.close()
  },
  data () {
    return {
      options: [
        { value: '0', label: '党建思政获奖' },
        { value: '1', label: '学术成果与获奖' },
        { value: '2', label: '优秀学位论文' },
        { value: '3', label: '学科竞赛获奖' },
        { value: '4', label: '体育比赛获奖' },
        { value: '5', label: '实践与创业成果' },
        { value: '6', label: '美育与劳动教育成果' },
        { value: '7', label: '其他' }],
      aea: {
        learnResult: '',
        resultInfos: [{
          name: '',
          achiveves: [
            { type: '', getTime: '', introduction: '', stuPartInfo: '' },
            { type: '', getTime: '', introduction: '', stuPartInfo: '' },
            { type: '', getTime: '', introduction: '', stuPartInfo: '' }
          ]
        }]
      }
    }
  },
  methods: {
    addResultItem () {
      if (this.aea.resultInfos.length < 20) {
        this.aea.resultInfos.push({
          name: '',
          achiveves: [
            { type: '', getTime: '', introduction: '', stuPartInfo: '' },
            { type: '', getTime: '', introduction: '', stuPartInfo: '' },
            { type: '', getTime: '', introduction: '', stuPartInfo: '' }
          ]
        })
      }
    },
    deleteResultItem (index) {
      if (this.aea.resultInfos.length > 1) {
        this.aea.resultInfos.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/page/1-5-1.less';
</style>
